<template>
	<view class="content">
		<view class="title">绑定手机号</view>
		<view class="value">
			<view>验证码已发送到您的手机 </view>
			<view>{{ phone }}</view>
		</view>
		<view class="code-inout">
			<one-input :value="code" type="box" @finish="finishedOne"></one-input>
			<view class="time" v-if="isYzm">{{ time }}s</view>
			<view class="time" v-else @tap="getCode">获取</view>
		</view>
		<view class="succBtn" @tap="bindPhone">确认</view>
	</view>
</template>

<script>
import OneInput from '@/components/OneInput';
export default {
	data() {
		return {
			phone: '',
			code: '',
			time: '60',
			isCode: false,
			isYzm: true
		};
	},
	components: { OneInput },

	onLoad(options) {
		this.isYzm = true;
		this.phone = options.phone;
		let time = this.time;
		let setTimer = setInterval(() => {
			this.time = time--;
			if (time <= 0) {
				this.isYzm = false;
				clearInterval(setTimer);
				this.time = 60;
			}
		}, 1000);
	},

	methods: {
		getCode() {
			this.$service.common.common
				.getCode({
					phone: this.phone
				})
				.then(res => {
					uni.showToast({
						title: '发送成功'
					});
				})
				.catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
				});
		},
		finishedOne(val) {
			this.code = val;
		},
		bindPhone() {
			if (!this.code) {
				uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				});
				return false;
			}
			this.$service.member.userHf
				.bindPhone({
					phone: this.phone,
					code: this.code
				})
				.then(res => {
					uni.showToast({
						title: '绑定成功',
						icon: 'none'
					});
					setTimeout(() => {
						this.$Router.back(2);
					}, 800);
				})
				.catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
				});
		}
	}
};
</script>
<style lang="scss" scoped>
.content {
	background: #ffffff;
	height: 100vh;
	overflow: hidden;
	padding-left: 50rpx;
	.title {
		color: #221d2c;
		font-size: 44rpx;
		margin-top: 38rpx;
	}
	.value {
		color: #86828c;
		font-size: 28rpx;
		margin-top: 16rpx;
	}
	.code-inout {
		margin-top: 72rpx;
		@include flexBox(center, center);
		/deep/.flex-box .active {
			border-color: #f70114;
		}
		.time {
			width: 84rpx;
			height: 94rpx;
			text-align: center;
			line-height: 94rpx;
			border-bottom: 1rpx solid #c1c1c3;
			margin-left: 44rpx;
		}
	}
	.succBtn {
		width: 640rpx;
		height: 80rpx;
		background: #f70114;
		border-radius: 40rpx;
		margin: auto;
		margin-top: 170rpx;
		color: #ffffff;
		font-size: 28rpx;
		text-align: center;
		line-height: 80rpx;
	}
}
</style>
